<template>
<view class="table-box">
	<uni-table border stripe emptyText="暂无更多数据" class="table" :loading="threadData.length>0 ? false : true" type="selection">
		<!-- 表头 -->
		<uni-tr>
			<uni-th align="center" v-for="item in tableHeard">{{ contrast[item] }}</uni-th>
		</uni-tr>
		
		<!-- 数据 -->
		<uni-tr v-for="(k, index) in threadData" :key="index" >
			<uni-td align="center">{{index+1}}</uni-td>
			<uni-td align="center">{{k.name}}</uni-td>
			<uni-td align="center">{{ getValueText(k.sex, sexs)}}</uni-td>
			<uni-td align="center">{{k.phone}}</uni-td>
			<uni-td align="center">{{k.age}}</uni-td>
			<!-- 资金需求 -->
			<uni-td align="center">{{ k.demand }}</uni-td>
			<!-- 城市 -->
			<uni-td align="center">{{ findCityAndDistrict(k.city, citys) }}</uni-td>
			<!-- 学历 -->
			<uni-td align="center">{{ getValueText(k.education, educations) }}</uni-td>
			<!-- 身份 -->
			<uni-td align="center">{{ getValueText(k.identity, identitys) }}</uni-td>
			<!-- 工作 -->
			<uni-td align="center">{{ getValueText(k.work, works) }}</uni-td>
			<!-- 收入 -->
			<uni-td align="center">{{ getValueText(k.income, incomes) }}</uni-td>
			<!-- 信用 -->
			<uni-td align="center">{{ getValueText(k.credit, credits) }}</uni-td>
			<!-- 资质 -->
			<uni-td align="center">{{ getTextsFromValues(k.certification, certifications) }}</uni-td>
			<uni-td align="center">{{k.remark}}</uni-td>
			<uni-td align="center">{{timestampToDate(k.upload_time)}}</uni-td>
			<uni-td align="center"><button type="primary" size="mini" hover-stop-propagation  @click="showPoput(k)">编辑</button></uni-td>

		</uni-tr>
	
	</uni-table>
</view>

<view class="uni-pagination-box">
		<!-- 
			show-icon：使用icon代替“上一页”、“下一页”
			show-page-size：显示条数框选择器
			pageSizeRange：条数框数组
			page-size：当前每页条数
			v-model：当前页码数
			total：页码总数
			@change：页码改变时的钩子
			@pageSizeChange：每页条数改变时的钩子
		-->
		<uni-pagination 
			show-icon
			show-page-size
			v-model="current"
			:total="total"
			@change="onPageChanged"
			@pageSizeChange="changeSize"
		/>
	</view>

</template>

<script>
import { mapState, mapActions } from 'vuex';
import {getValueText, findCityAndDistrict, getTextsFromValues, timestampToDate} from'@/utils/common.js'
import { 
	sexs,
	educations,
	identitys,
	works,
	incomes,
	credits,
	certifications,
	citys,
} from '@/common/formItemSelect.js'
export default{
	data(){
		return {
			sexs: [],
			educations: [],
			identitys: [],
			works: [],
			incomes: [],
			credits: [],
			certifications: [],
			citys: [],
			contrast : {
				index: '序号',
				name: '姓名',
				sex: '性别',
				phone: '手机号',
				age: '年龄',
				demand: '资金需求',
				city: '城市',
				education: '学历',
				identity: '身份',
				work: '单位类型',
				income: '税前收入',
				credit:'征信',
				certification:'资质',
				remark: '备注',
				upload_time: '提交时间',
				upload_user: '提交者',
				operation: '操作'
			}
		}
	},
	computed:{
		...mapState({
			tableHeard: state => state.clientMy.tableHeard,
			threadData: state => state.clientMy.thread_tree_data,
			current: state => state.clientMy.current,
			total: state => state.clientMy.total,
		})
	},
	
	
	mounted(){
		this.getThreadData();
		this.getDataCount();
		
		this.sexs = sexs
		this.educations = educations
		this.identitys = identitys
		this.works = works
		this.incomes = incomes
		this.credits = credits
		this.certifications = certifications
		this.citys = citys
	},
	
	
	
	methods:{
		getValueText,
		findCityAndDistrict,
		getTextsFromValues, 
		timestampToDate,
		...mapActions('clientMy', ['getThreadData', 'getDataCount']),
		
		formattedArray(array){
			return array.map(item => `${item}`).join(', ') 
		},
		// 页码改变时的钩子
		onPageChanged(e){
			console.log('页码改变时的钩子');
			console.log(e);
		},
		// 每页条数改变时的钩子
		changeSize(e){
			console.log('每页条数改变时的钩子');
			console.log(e);
		},
		
		// 点击时编辑按钮
		showPoput(e){
			console.log(this.$route);
			this.$store.commit('clientMy/setClientInfo', e)
			
			this.$store.dispatch('clientMy/getFollowRecord')
		},
	}
}
</script>

<style lang="scss" scoped>
.table-box{
	margin-top: 20px;
	box-sizing: border-box;
	flex: 1;
	overflow: auto;	
	display: flex;
	
	
	::v-deep .table{
		flex: 1;
		min-height: auto;
		box-sizing: border-box;
		overflow: auto;
		border: 1px solid rgba(#87CEEB, .3);
		box-shadow: 2px 2px 20px #87CEEB;
	}
}

/* 分页容器 */
.uni-pagination-box {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

<style scoped lang="scss">
// tr th{
// 	position:sticky;
// 	top:0;
// }

// tr th:last-child, tr th:nth-child(1){
// 	z-index: 3;
// 	color: red;
// 	background-color: red !important;
// }

tr:nth-child(1){
	position:sticky;
	top:0;
	z-index: 3;
}

td, th {
	/* 设置td,th宽度高度 */
	// border:0.5px solid white;
	// width: 180rpx;
	// height:45rpx;
}
th {
	z-index: 1;
	background-color:#ecf5ff;
}
th:nth-last-child(1), td:nth-last-child(1){
	position:sticky;
	right:0;
	z-index:2;
	width: 180rpx;
	background-color: #ddf9ec; 
}
</style>